<template>
  <div>
    <input type="text" v-model.number="a" />
    <input type="text" v-model.number="b" />
    <button @click="add">+</button>
    <hr />
    <input type="text" @input="fn" v-model.trim="msg" />
    <hr />
    <!-- lazy修饰符就把v-model底层默认是oninput事件来触发，变成onchange事件 -->
    <!-- change事件和blur区别：change是失焦并且值变了才会触发 -->
    <input type="text" v-model.lazy="msg1" />
  </div>
</template>

<script>
// v-model相关的指令修饰符
// 1. number
// 2. trim
// 3. lazy
export default {
  data() {
    return {
      a: 1,
      b: 2,
      msg: "",
      msg1: "",
    };
  },
  methods: {
    add() {
      console.log(this.a + this.b);
    },
    fn() {
      console.log(this.msg);
    },
  },
};
</script>

<style scoped></style>
